<template>
  <view class="container">
    <view class="upadate">
      <text class="label">账号</text>
      <view class="input-container">
        <u-input
          placeholder="请输入内容"
          border="bottom"
          :value="name"
          :maxlength="18"
          @change="changeName"
        >
          <template slot="suffix">
            <u-icon
              name="close-circle-fill"
              size="20"
              color="#dcdcdc"
              @click="name = ''"
            ></u-icon> </template
        ></u-input>
        <view class="flex-row">
          <text>{{ length }}/18</text>
        </view>
      </view>
      <u-button
        text="修改"
        shape="circle"
        color="#e43d33"
        @click="updateNickName"
      ></u-button>
      <view class="flex-row bottom">
        <text class="text-grey1">登录即代表同意</text>
        <text @click="handleUserAgrement" class="text-red">《用户协议》</text>
        <text @click="handlePrivacy" class="text-red">《隐私协议》</text>
      </view>
    </view>
  </view>
</template>
  
  <script>
import { isEmptyString, toast } from "../../../utils/common";
import { getStorage } from "../../../utils/auth";
import application from "@/static/const/application";
export default {
  data() {
    return {
      name: "",
      globalConfig: getApp().globalData.config,
      length: 0,
      user: {},
    };
  },
  onLoad() {
    this.length = this.name.length;
    this.user = getStorage(application.user);
    this.name = this.user.nickName;
    console.log(this.user);
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar;
    },
  },
  methods: {
    // 隐私协议
    handlePrivacy() {
      let site = this.globalConfig.appInfo.agreements[0];
      this.$tab.navigateTo(
        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    // 用户协议
    handleUserAgrement() {
      let site = this.globalConfig.appInfo.agreements[1];
      this.$tab.navigateTo(
        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    changeName(e) {
      this.name = e;
      this.length = e.length;
    },
    updateNickName() {
      if (isEmptyString(this.name)) {
        toast("昵称不能为空");
        return;
      }
      let data = {
        userName: this.name,
        userId: this.user.userId,
      };
      console.log(data);
      this.$store.dispatch("EditUser", data).then((res) => {
        if (res) {
          toast("修改成功");
          uni.$emit("updateUser", { msg: "页面更新" });
          uni.navigateBack();
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
page {
  background-color: #ffffff;
  .container {
    min-height: 100vh;
    background-color: #ffffff;
  }
  .upadate {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    .input-container {
      margin-top: 1rem;
      margin-bottom: 2rem;
      .flex-row {
        justify-content: flex-end;
        align-items: center;
        text-align: right;
        margin-top: 1rem;
      }
    }
    .bottom {
      margin-top: 0.5rem;
      justify-content: center;
    }
  }
}
</style>
  